{include file='header'/}
<body>
<form class="layui-form" action="javascript:;" onsubmit="return dosub(this)">
    <div class="mainBox">
        <div class="main-container layui-container">
            <div class="layui-form-item">
                <label class="layui-form-label required">所属模型</label>
                <div class="layui-input-inline">
                    <select name="model_id" lay-verify="" lay-search>
                        <?php
                        foreach($modelsIdList as $key=>$v){
                        ?>
                        <option value="<?php echo $v['id'] ?>"
                        <?php if($v['id'] == $model_id) echo "selected"; ?>><?php echo $v['name'] ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">字段名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required|name"
                               autocomplete="off" placeholder="请输入字段名称，如：title" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">字段标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="required"
                               autocomplete="off" placeholder="请输入字段标题：如：标题" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label required">字段类型</label>
                    <div class="layui-input-inline">
                        <select name="type" lay-verify="required" lay-filter='type'>
                            {foreach name='field_type' id='vo' key='k'}
                            <option value="{$k}">{$vo}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">是否必填项</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="is_required" value="0" title="否" checked>
                        <input type="radio" name="is_required" value="1" title="是">
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-hide" id="valueInput">
                <label class="layui-form-label required">字段值</label>
                <div class="layui-input-block">
                    <table class="layui-table" id="value_table" lay-filter="table">
                        <thead>
                        <tr>
                            <td>选项文字（必填）</td>
                            <td>选项值（必填，不允许填0）</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <input type="text" class="layui-input" name="value[name][]">
                            </td>
                            <td>
                                <input type="text" class="layui-input" name="value[value][]">
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs value-add">添加</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs value-del">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="formDate">
                <label class="layui-form-label">日期选择</label>
                <div class="layui-input-block">
                    <input type="radio" name="value2" value="1" title="日期（{:date('Y-m-d')}）" checked>
                    <input type="radio" name="value2" value="2" title="日期+时间（{:date('Y-m-d H:i:s')}）">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-inline">
                    <input type="number" name="sort"
                           autocomplete="off" placeholder="请输入排序" class="layui-input" value="200">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="启用" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="admin-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{include file='footer'/}
<script>
  layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    form.verify({
      name: function (value, item) {
        if (!new RegExp("^[a-zA-Z_]+$").test(value)) {
          return '字段名只能是字母和下划线';
        }
      }
    })

    form.on('select(type)', function (obj) {
      if (obj.value == 3 || obj.value == 4 || obj.value == 7) {
        $('#valueInput').removeClass('layui-hide');
        $('#formDate').addClass('layui-hide');
      } else if (obj.value == 9) {
        $('#formDate').removeClass('layui-hide');
        $('#valueInput').addClass('layui-hide');
      } else {
        $('#valueInput').addClass('layui-hide');
        $('#formDate').addClass('layui-hide');
      }
    })
    //添加行
    $('body').on('click', '.value-add', function () {
      var html = '<tr>' +
        '<td><input type="text" class="layui-input" name="value[name][]"></td>' +
        '<td><input type="text" class="layui-input" name="value[value][]"></td>' +
        '<td>' +
        '<a class="layui-btn layui-btn-xs value-add">添加</a>' +
        '<a class="layui-btn layui-btn-danger layui-btn-xs value-del">删除</a>' +
        '</td>' +
        '</tr>';
      $(html).appendTo($('#value_table tbody:last'));
      form.render();//因为有select元素，所有添加后要重新渲染一次
    });
    //删除行
    $('body').on('click', '.value-del', function () {
      if ($('#value_table tbody tr').length === 1) {
        layer.msg('只有一条不允许删除。', {
          time: 2000
        });
      } else {
        //删除当前按钮所在的tr
        $(this).closest('tr').remove();
      }
    })

    window.dosub = function (obj) {
      var loading = layer.load(2);
      $.ajax({
        url: "{:url('models_field/add')}",
        data: $(obj).serialize(),
        dataType: 'json',
        type: 'post',
        success: function (res) {
          layer.close(loading);
          if (res.code === 200) {
            hui_msg(res.msg, 1, function () {
              var pageId = parent.layer.getFrameIndex(window.name);
              parent.layer.close(pageId);
            });
          } else {
            hui_msg(res.msg, 2);
          }
        }
      })
      return false;
    }
  })
</script>
</body>
</html>
